<template>
 <div class="layout-demo">
  <a-layout style="height: 100vh;">
   <a-layout-header>
    <GlobalHander/>
   </a-layout-header>
   <a-layout-content>
    <router-view></router-view>
   </a-layout-content>
   <a-layout-footer>OJ在线判题平台</a-layout-footer>
  </a-layout>

 </div>
</template>
<script setup lang="ts">



</script>
<style scoped>
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
 display: flex;
 flex-direction: column;
 justify-content: center;
 color: var(--color-white);
 font-size: 16px;
 font-stretch: condensed;
 text-align: center;
}


.layout-demo :deep(.arco-layout-header){
 margin-bottom: 10px;
 box-shadow: #eee 1px 1px 5px;
}
.layout-demo :deep(.arco-layout-footer) {
 height: 50px;
 background-color:#42b983;
 padding: 16px;
 position: sticky;
 text-align: center;
}

.layout-demo :deep(.arco-layout-sider) {
 width: 206px;
 background-color: var(--color-primary-light-3);
}

.layout-demo :deep(.arco-layout-content) {

 margin-bottom: 10px;
}

</style>
<script setup lang="ts">
import GlobalHander from "@/layouts/GlobalHander.vue";


</script>